{{ define "user/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据看板</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        .dashboard-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .dashboard-card h3 {
            margin-bottom: 15px;
        }
        .dashboard-card p {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .chart-container {
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <div class="dashboard-card">
                <h3>今日销售额</h3>
                <p>$12,345</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-card">
                <h3>本月订单量</h3>
                <p>567</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-card">
                <h3>活跃用户数</h3>
                <p>890</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="dashboard-card">
                <h3>销售趋势图</h3>
                <div class="chart-container">
                    <!-- 这里可以使用 JavaScript 图表库（如 Chart.js 或 Highcharts）来绘制图表 -->
                    <canvas id="salesTrendChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-card">
                <h3>关键指标</h3>
                <ul>
                    <li>转化率: 12%</li>
                    <li>新用户: 234</li>
                    <li>流失用户: 12</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery 和 Chart.js 库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
    $(document).ready(function() {
        // 使用 Chart.js 绘制销售趋势图
        var ctx = document.getElementById('salesTrendChart').getContext('canvas');
        var salesTrendChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '销售额',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    data: [1200, 1500, 1800, 2000, 1600, 2200, 2500]
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    });
</script>
</body>
</html>
{{ end }}